body {
  margin: 0;
}
:root {
  --bg-color: #fff;
  --second-bg-color: #e9e9e9;
  --text-color: #2f2f2f;
  --main-color: #b68362;
  --other-color: #8b8a91;
  --alt-color: #4b4b51;
  --ann-color: #c7c6d3;
}
.header {
  position: sticky;
  height: 48px;
  top: 0;
  right: 0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  // backdrop-filter: blur(25px);
  justify-content: space-between;
  transition: all .5s ease;
  box-shadow: 0 10px 10px rgba(0,0,0,0.08);
  
  .logo {
    width: 88px;
    min-width: 88px;
    height: 48px;
    margin: 0;
    background-image: url('../../public/beiyulake.com.jpg');
    background-size: contain;
    background-repeat: no-repeat;

    h1 {
      font-size: 24px;
      opacity: 0;
    }
  }

  .menu {
    height: 48px;
    display: flex;
    margin: 0 auto 0 30px;
    min-width: 360px;

    a {
      display: inline-block;
      font-size: 20px;
      font-weight: 300;
      color: var(--text-color);
      margin: 0 20px;
      transition: all .6s ease;
      height: 48px;
      line-height: 48px;
      text-decoration: none;

      &:hover {
        color: var(--main-color);
      }
      &.active {
        color: var(--main-color);
      }
    }
  }
  .searchArea {
    display: flex;
    border: 1px solid gray;
    border-radius: 22px;
    align-items: center;
    margin: 5px 20px 0;

    .searchBtn span {
      padding: 10px;
      cursor: auto;
    }
    .keyword {
      border: none;
      margin-right: 10px;

      &:focus {
        outline: none;
      }
    }
  }
}
.main {
  height: calc(100vh - 68px);
  overflow: auto;
  position: relative;

  .container {
    overflow: hidden;
   
    .bloglistContainer {
      position: relative;
      width: 950px;
      margin: 0 auto;
      overflow: hidden;

      .bloglist {
        display: flex;
        flex-wrap: wrap;

        .card {
          --w: 300px;
          --n: 3;
          --gap: calc((100% - var(--w) * var(--n)) / var(--n) / 2);
          width: var(--w);
          margin: 15px var(--gap);
          transition: all .3s ease;

          img.cover {
            display: block;
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 15px;
            cursor: pointer;
          }
          
          .titleContainer {
            margin-top: 10px;
            position: relative;
            padding-right: 40px;
            
            .title {
              cursor: pointer;
              line-height: 22px;
              height: 22px;
              font-size: 15px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: block;
              transition: all .5s ease;

              &:hover {
                color: var(--main-color);
                cursor: pointer;
              }
            }
            .ellipsis {
              position: absolute;
              opacity: 0;
              top: 0;
              right: 0;
              transform: rotate(90deg);
              padding: 0 4px 0 3px;
              letter-spacing: -3px;
              transition: all .5s ease;

              &:hover {
                border-radius: 4px;
                background-color: #efefef;
                cursor: default;
              }
            }
          }
          &:hover {
            .ellipsis {
              opacity: 1;
            }
          }
          .subtitleContainer {
            margin-top: 4px;
            margin-left: -3px;
            font-size: 13px;
            color: #bfbfbf;
            display: flex;
            align-items: center;
            .up,
            .name,
            .dot,
            .date,
            .tag {
              transition: all .5s ease;
            }
            &:hover {
              color: var(--main-color);
            }
            .up {
              border: 1px solid #8f8f8f;
              border-radius: 6px;
              padding: 0 3px;
              transform: scale(0.6);
            }
            .dot {
              margin: 0 5px;
            }
            .tag {
              margin-left: auto;
              margin-right: 5px;
              color: #5f5f5f;
            }
            
          }
        }
      }
    }
  }

  .footer {
    height: 48px;
    line-height: 48px;
    text-align: center;
    position: sticky;
    top: calc(100vh - 68px);
    left: 0;

    a {
      &:link,
      &:visited,
      &:hover,
      &:active {
        color: gray;
      }
    }
  }
}